<!-- 模板 -->
<template>
  <div class="root">
    <div class="nav">
      <div class="photo">
        <div class="photof">
          <div class="photofl"><img src="../assets/img/2my-tx.png" alt="" /></div>
          <div class="photofi">
            <div v-if="username === '请先登录'" class="phototext" @click="goLogin()">{{ username }}</div>
            <div v-else class="phototext">{{ username }}</div>
            <div class="phototext1" v-if="username !== '请先登录'">关注:0 喜欢:0</div>
          </div>
        </div>
        <div class="photos"><img src="../assets/img/my-msg.png" alt="" /></div>
      </div>
    </div>
    <div class="section">
      <div class="section11">
        <div class="sectionf">
          <div class="sectionff">我的订单</div>
          <a href="##" @click="goOrder()">查看全部</a>
        </div>
        <div class="sections">
          <div class="sectionicon">
            <img src="../assets/img/my-func1.png" alt="" />
            <p>待付款</p>
          </div>
          <div class="sectionicon">
            <img src="../assets/img/my-func2.png" alt="" />
            <p>代发货</p>
          </div>
          <div class="sectionicon">
            <img src="../assets/img/my-func2.png" alt="" />
            <p>待收货</p>
          </div>
          <div class="sectionicon">
            <img src="../assets/img/my-func4.png" alt="" />
            <p>待评价</p>
          </div>
          <div class="sectionicon1">
            <img src="../assets/img/my-func5.png" alt="" />
            <p>退换/售后</p>
          </div>
        </div>
      </div>

      <div class="sectiont">
        <div class="sectiontf"><img src="../assets/img/my-study.png" alt="" />我的学习</div>
        <div class="sectionts"><img src="../assets/img/left.png" alt="" /></div>
      </div>

      <div class="sectiont1">
        <div class="sectiontf"><img src="../assets/img/my-cart.png" alt="" />购买记录</div>
        <div class="sectionts"><img src="../assets/img/left.png" alt="" /></div>
      </div>

      <div class="sectiont1">
        <div class="sectiontf"><img src="../assets/img/my-opinion.png" alt="" />意见反馈</div>
        <div class="sectionts"><img src="../assets/img/left.png" alt="" /></div>
      </div>

      <div class="sectiont1">
        <div class="sectiontf"><img src="../assets/img/my-video.png" alt="" />本地视频</div>
        <div class="sectionts"><img src="../assets/img/left.png" alt="" /></div>
      </div>

      <div class="sectiont1">
        <div class="sectiontf"><img src="../assets/img/my-collect.png" alt="" />收藏</div>
        <div class="sectionts"><img src="../assets/img/left.png" alt="" /></div>
      </div>

      <div class="sectiont">
        <div class="sectiontf"><img src="../assets/img/my-setting.png" alt="" />设置</div>
        <div class="sectionts"><img src="../assets/img/left.png" alt="" /></div>
      </div>
    </div>
    <Footers :index1="index1"></Footers>
  </div>
</template>
<script>
import Footers from './Footers.vue'
// import request from '../utils/request.js'
export default {
  name: '',
  data() {
    return {
      index1: 4,
      username: '请先登录',
    }
  },
  props: [],
  components: { Footers },
  computed: {},
  filters: {},
  methods: {
    goLogin() {
      this.$router.push('/')
    },
    goOrder() {
      this.$router.push('/orders')
    },
    getUserInfo() {
      let user = JSON.parse(sessionStorage.getItem('login'))
      if (!user) {
        return
      }
      this.username = user.data[0].username
      console.log(this.username)
    },
  },
  created() {},
  mounted() {
    this.getUserInfo()
  },
}
</script>
<style lang="less" scoped>
.root {
  color: #333;
  font-size: 0.28rem;
  width: 100%;
  background: #eeeeee;
  height: 100vh;
  .nav {
    width: 100%;
    background-color: #fc1e1e;
    padding: 0.6rem 0.2rem;
    .photo {
      display: flex;
      justify-content: space-between;
      .photof {
        display: flex;
        align-items: center;
        .photofl {
          width: 0.9rem;
          img {
            width: 100%;
          }
        }
        .photofi {
          margin-left: 0.2rem;
          .phototext {
            font-size: 0.4rem;
            color: #fff;
          }
          .phototext1 {
            font-size: 0.24rem;
            color: #fff;
          }
        }
      }
      .photos {
        width: 0.48rem;
        display: flex;
        align-items: center;
        img {
          width: 100%;
        }
      }
    }
  }
  .section {
    font-size: 0.28rem;
    .section11 {
      margin-top: -0.4rem;
      padding: 0.2rem;
    }
    .sectionf {
      border-top-left-radius: 0.2rem;
      border-top-right-radius: 0.2rem;
      background-color: #fff;
      width: 100%;
      border-bottom: 1px solid #ececec;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.2rem 0.24rem;
      .sectionff {
        font-size: 0.32rem;
        font-weight: 600;
      }
      a {
        font-size: 0.24rem;
        color: #999;
      }
    }
    .sections {
      padding: 0.24rem 0;
      background-color: #fff;
      border-bottom-left-radius: 0.2rem;
      border-bottom-right-radius: 0.2rem;
      display: flex;
      justify-content: space-around;
      font-size: 0.28rem;

      .sectionicon {
        color: #686868;
        img {
          width: 0.68rem;
        }
        text-align: center;
      }
      .sectionicon:nth-of-type(1) {
        img {
          width: 0.7rem;
        }
      }
      .sectionicon:nth-of-type(2),
      .sectionicon:nth-of-type(3) {
        img {
          margin-bottom: 0.08rem;
          width: 0.6rem;
        }
      }
      .sectionicon1 {
        color: #686868;
        img {
          width: 0.68rem;
        }
        text-align: center;
      }

      p {
        text-align: center;
      }
    }

    .sectiont {
      color: #666;
      margin-top: 0.2rem;
      padding: 0.2rem;
      width: 100%;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      .sectiontf {
        display: flex;
        align-items: center;
        img {
          margin-right: 0.2rem;
          width: 0.4rem;
        }
      }
      .sectionts {
        display: flex;
        align-items: center;
        img {
          width: 0.32rem;
        }
      }
    }
    .sectiont:nth-of-type(2) {
      margin-top: 0;
      margin-bottom: 0.2rem;
    }

    .sectiont1 {
      color: #666;
      padding: 0.1rem 0.2rem;
      width: 100%;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      .sectiontf {
        display: flex;
        align-items: center;
        img {
          margin-right: 0.2rem;
          width: 0.4rem;
        }
      }
      .sectionts {
        display: flex;
        align-items: center;
        img {
          width: 0.32rem;
        }
      }
    }
  }
}
</style>
